const setWaterCanvas = (str: string, color: string): string => {
    const id = "1.23452384164.123412415";
    const existingWatermark = document.getElementById(id);
    if (existingWatermark) {
      existingWatermark.remove();
    }
  
    const can = document.createElement("canvas");
    can.width = 200;
    can.height = 80;
    const cans = can.getContext("2d") as CanvasRenderingContext2D;
    cans.rotate((-20 * Math.PI) / 180);
  
    const fontSize = 20;
    const maxWidth = can.width - 20;
    let currFontSize = fontSize;
    let text = str;
    while (cans.measureText(text).width > maxWidth && currFontSize > 6) {
      currFontSize--;
      cans.font = `${currFontSize}px Vedana`;
      text = str.slice(0, -1);
    }
  
    cans.fillStyle = color;
    cans.textAlign = "center";
    cans.textBaseline = "middle";
    cans.fillText(text, can.width / 2, can.height);
  
    const div = document.createElement("div");
    div.id = id;
    div.style.pointerEvents = "none";
    div.style.position = "fixed";
    div.style.zIndex = "100000";
    div.style.top = "0";
    div.style.left = "0";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`;
    document.body.appendChild(div);
  
    return id;
  };
  
  export function setWatermark(str: string, color: string): void {
    let id = setWaterCanvas(str, color);
    if (document.getElementById(id) === null) {
      id = setWaterCanvas(str, color);
    }
  }
  
  export function clear(): void {
    const id = "1.23452384164.123412415";
    const existingWatermark = document.getElementById(id);
    if (existingWatermark) {
      existingWatermark.remove();
    }
  }